<template>
    <div class="recommend">
        <Card>
            <span>爆款推荐</span>
        </Card>
        <ul>
            <li v-for="(item,index) in recommendList" :key="index">
                <h2>
                    <img :src="item.imgUrl" alt="">
                </h2>
                <div>
                    <h3>{{item.name}}</h3>
                    <p>{{item.content}}</p>
                    <div class="price">
                        <span>￥</span>
                        <b>{{item.price}}</b>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import Card from '@/components/home/Card.vue'
export default {   
    name:'recommend',
    props: {
      recommendList:Array  
    },
    components: {
        Card
    }
}
</script>

<style scoped>
.recommend ul li h2{text-align: center;}
.recommend ul li img{width: 9.6rem;height: 3.84rem;border-radius: 12px;}
.recommend ul li{position: relative;}
.recommend ul li > div{position: absolute;right: 0;top: 0;display: flex;flex-direction: column;align-items: baseline;padding: .533333rem;}
.recommend ul li > div h3{font-size: 12px;}
.recommend ul li > div p{font-size: 0.42666rem;}
.price{margin-top: .666667rem;text-align: right;color: #f00;width: 100%;}
.price span{font-size: .373333rem;}
</style>